<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>哈尔滨师范大学</title>
</head>
<style>
    .hidden {
        display: none;
    }

    body{
        background: #f3f3f3;
    }
    .jian_bg{
        background: rgb(255, 255, 255);
        border-radius: 10px;
        padding: 1px 30px;
        box-shadow: 0px 0px 10px 0px #ededed;
        margin-bottom: 25px;
    }
    .left{
        display: flex;
    }
    .ra_blue{
        background: #2070EE;
        width: 5px;
        /* height: 20px; */
        border-radius: 10px;
    }
    .ti_h{
        margin-top: 22px;
        margin-right: 15px;
        height: 20px;
    }
    .ra_h{
        height: 5px;
        margin:  15px 15px 15px 0px;
    }
    .li_title{
        /* background: #bfb6b6; */
        height: 30px;
        line-height: 30px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .no_style{
        border: none;
        outline: none;
    }
    .phone_sty{
        outline: none;
        color: #2070EE;
        border: 1px solid #2070EE;
        border-radius: 4px;
        height: 25px;
        margin-right: -30px;
    }

    .btn{
        width: 50%;
        height: 25px;
        background: #4b8bf3;
        color: white;
        outline: none;
        border: none;
        border-radius: 15px;
        font-weight: 900;
        font-size: 15px;
        box-shadow: 0px 0px 3px 1px #4b8bf3;
        margin: 20px 25%;
    }

    .btn_2{
        width: 35%;
        height: 25px;
        background: #4b8bf3;
        color: white;
        outline: none;
        border: none;
        border-radius: 15px;
        font-weight: 900;
        font-size: 15px;
        box-shadow: 0px 0px 3px 1px #4b8bf3;
        margin-bottom: 20px;
        margin-top: 20px;

    }

    .name_style{
        outline: none;
        border: none;
        border-radius: 4px;
        height: 25px;
        margin-right: -30px;
    }
    .yanzhengm{
        background: #548fef;
        color: aliceblue;
        border-radius: 6px;
        width: 60px;
        padding: 2px;
        text-align: center;

    }
</style>
<body>
<!-- 外校老师信息 -->
<div class="jian_bg left">
    <div class="ra_blue ti_h"></div>
    <h4>哈尔滨师范大学评卷信息填报</h4>
</div>


<form th:action="@{/addExternalteacherInfo}"  method="post">

    <div class="jian_bg">
        <div class="left">
            <div class="ra_blue ra_h"></div>
            <div class="li_title ">个人信息</div>
        </div>

        <label for="name">姓名</label>
        <input class="no_style" type="text" id="name" name="name" placeholder="请输入姓名"><br><br>
        <label for="name">身份证号</label>
        <input class="no_style" type="text" id="idcard" name="idcard" placeholder="请输入身份证号"><br><br>

        <div class="left">
            <label for="region" style="line-height: 25px;margin-right: 7px;">手机号码</label><br>
            <input class="no_style" style="width: 95px;height: 25px;margin-right: 5px;" type="tel" id="telephone" name="telephone" placeholder="请输入手机号码" ><br><br>

            <select class="phone_sty" id="region" name="region">
                <option value="+86-">中国大陆</option>
                <option value="+886-">中国台湾</option>
            </select>
        </div>

        <div class="left">
            <label for="professionaltitle" style="line-height: 25px;margin-right: 7px;">职称</label><br>
            <input class="no_style" name="professionaltitle" style="width: 110px;;height: 25px;margin-right: 5px;" type="text" id="inputBox"  placeholder="请选择职称" readonly><br><br>

            <select class="name_style" id="professionaltitle" name="professionaltitle">
                <option value="一级教师">一级教师</option>
                <option value="一级教师 2">一级教师 2</option>
                <option value="一级教师 3">一级教师 3</option>
            </select>
        </div>

        <label for="region">职务</label>
        <input  class="no_style" style="width: 250px" type="text" id="duties" name="duties" placeholder="请输入职务（如教师、教务主任等）" ><br><br>
    </div>

    <div class="jian_bg">
        <div class="left">
            <div class="ra_blue ra_h"></div>
            <div class="li_title ">工作单位</div>
        </div>

        <label for="region">单位名称</label>
        <input class="no_style" type="text" id="unitname" name="unitname" placeholder="请输入单位名称" ><br><br>
        <label for="region">单位电话</label>
        <input class="no_style" type="text" id="unitphone" name="unitphone" placeholder="请输入单位电话" ><br><br>
        <label for="region">银行卡号</label>
        <input class="no_style" type="text" id="bankcardnumber" name="bankcardnumber" placeholder="请输入银行卡号" ><br><br>
        <label for="region">开户所在地</label>
        <input class="no_style" type="text" id="openbankadd" name="openbankadd" placeholder="请输入开户所在地（如北京）" ><br><br>
        <label for="region">开户银行</label>
        <input class="no_style" type="text" id="openbank" name="openbank" placeholder="请输入开户行名称" ><br>

        <div class="left" style="margin-bottom: -20px;">
            <p style="width: 60%;margin-right: 10px;">车辆是否入校</p>

            <p>
                <input type="radio" id="yes"  name="vehiclesinter" value=1>
                <label for="yes">是</label>
            </p>
            <p>
                <input type="radio" id="no"  name="vehiclesinter" value=0>
                <label for="no">否</label>
            </p>
        </div>
        <div class="left">
            <p style="width: 60%;margin-right: 10px;">是否住宿</p>
            <p>
                <input type="radio" id="y"  name="accommodation" value=1>
                <label for="yes">是</label>
            </p>
            <p>
                <input type="radio" id="n"  name="accommodation" value=0>
                <label for="no">否</label>
            </p>
        </div>
    </div>

    <div class="jian_bg">
        <input class="btn" type="submit" value="提交">
    </div>

</form>

</body>
<script>
    var dropdown = document.getElementById("professionaltitle");
    var inputBox = document.getElementById("inputBox");

    // Add event listener to the dropdown to update the input value when a option is selected
    dropdown.addEventListener("change", function() {
        inputBox.value = this.value;
    });
</script>
</html>
